<template>
	<view class="history-bill">
		<view class="hb-header">
			<text class="first-text">交易日期</text>
			<view :class="['date',{'date-active': otherFlag == 0}]">
				<picker mode="date" :value="dateL" :start="startDate" :end="endDate" @change="onDate_l">
					<view class="date-text">{{dateL}}</view>
				</picker>
			</view>
			<text class="two-text">-</text>
			<view :class="['date',{'date-active': otherFlag == 0}]">
			<picker mode="date" :value="dateR" :start="dateL" :end="endDate" @change="onDate_r">
				<view class="date-text">{{dateR}}</view>
			</picker>
			</view>
			<view class="other-box" @click="onOther">
				<view :class="['other',{'other-active': otherFlag == 3}]" id="3">
				本月
				</view>
				<view :class="['other',{'other-active': otherFlag == 2}]" id="2">
				本周
				</view>
				<view :class="['other',{'other-active': otherFlag == 1}]" id="1">
				本日
				</view>
			</view>
		</view>
		
	<!-- 	<view class="hb-query">
			<button type="primary" @click="getDataList">查询</button>
		</view> -->
		
		<view class="hb-content">
			<view class="ct-item ct-header">
				<text>自提订单</text>
				<text>配送订单</text>
				<text>已收货订单</text>
			</view>
			<view class="ct-item ct-border">
				<text>{{dataList.mentio}}</text>
				<text>{{dataList.deliver}}</text>
				<text>{{dataList.received}}</text>
			</view>
			<view class="ct-footer">
				<view class="ft-item">
					<text>订单总计：</text>
					<text>{{dataList.order_num}}单</text>
				</view>
				<view class="ft-item">
					<text>金额总计：</text>
					<text>{{dataList.amount_num}}元</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				dateL: currentDate,
				dateR: currentDate,
				otherFlag: '1', //0: 本月 1：本周 2：本日
				dataList: {}
			};
		},
		computed: {
			startDate() {
				return this.getDate('start'); 
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			async getDataList (){
				if(this.otherFlag == '0') {
					uni.showLoading({
						title: '订单获取中'
					})
					let a = await this.$http.getHistoryBill({start_time: this.dateL,end_time: this.dateR})
					this.dataList = a.data;
					uni.hideLoading()
					console.log(a)
					return
				}
				uni.showLoading({
					title: '订单获取中'
				})
				let a = await this.$http.getHistoryBill({timeType: this.otherFlag})
				this.dataList = a.data;
				uni.hideLoading()
			},
			
			onOther(e){ // 选择时间段
				this.otherFlag = e.target.id;
				this.getDataList();
			},
			onDate_l(e) { // 日期选择的左边
				this.dateL = e.detail.value;
				this.otherFlag = '0';
			},
			onDate_r(e) { // 日期选择的右边
				this.dateR = e.detail.value;
				this.otherFlag = '0';
				this.getDataList();
			},
			getDate(type) { //时间格式化
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 5;
				} else if (type === 'end') {
					year = year + 5;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/myStore.scss';
</style>
